<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>小普商城</title>
    <link rel="stylesheet" href="css/aui.css">
    <link rel="stylesheet" type="text/css" href="css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-flex.css" />
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">微信商城</header>
<!--轮播-->
<section id="app">
    <div id="aui-slide3">
        <div class="aui-slide-wrap"  >
            <div class="aui-slide-node bg-dark goDetail" @click="goLunboDetail">
                <img src="images/2.png"/>
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="images/2.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="images/3.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="images/4.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="images/5.png" />
            </div>
        </div>

        <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </div>
    <div class="ad">推广活动</div>
    <div class="shop_title">商品榜单</div>
    <div class="main">
        <div class="aui-flex-item-12 aui-border-l" >
            <div class="aui-flex-col">
                <div class="aui-flex-item-6  aui-text-center" style="position: relative;" v-for="goods in showGoodsList" v-on:click="goGoodsDetail(goods.goods_id)">
                    <img v-bind:src="imgBaseUrl+goods.goods_image">
                    <!--<img v-bind:src="'http://localhost/wx/backend/'+goods.goods_image">-->
                    <div class="aui-bg-default shop_price">
                        <h5 class="aui-text-warning aui-text-center aui-font-size-18">{{goods.goods_name}}</h5>
                        <h5 class="aui-text-info aui-text-center aui-font-size-18">{{goods.shop_price}}</h5>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="buttonInfo">没有更多商品</div>
    <a id="topBtn" href="javascript:scroll(0,0)">
        <img src="./images/toTop.png" alt="">
    </a>
</section>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active goHome"  >
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item goShop">
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item goMyCenter" >
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">个人中心</div>
    </div>
</footer>
<!--配合后台php用-->
<!--<input value="<?=$unionid?>" type="hidden" name="unionid" >-->
<!--<input value="<?=$userid?>" type="hidden" name="userid" >-->
<!--<input value="<?=$_csrf?>" type="hidden" name="_csrf" >-->
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/aui-slide.js"></script>
<script type="text/javascript" src="js/aui-tab.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    var xpHome = new Vue({
        el:'#app',
        data:{
            imgBaseUrl:nUrls.imgBaseUrl,
            showGoodsList:[] //首页 商品列表信息
        },
        methods:{
            goLunboDetail:function(){
                window.location.href = "./html/detail/goods_detail.html";
            },
            goGoodsDetail:function(goods_id){//商品详情
                window.location.href = "./html/detail/goods_detail.html?id="+goods_id;
            },
            goHome:function(){
                window.location.href = "#";
            },
            goMyCenter:function(){//个人中心
                window.location.href="html/my_center.html";
            },
            goodsList:function(){//动态获取 商品 并展示
                $.ajax({
                    url: nUrls.getGoodsList,
                    type:'post',
                    success:function(data){
                        var result = eval('('+data+')');
                        if(result && result.code == 200){
                            console.log(result)
                            xpHome.showGoodsList = result.data;
                            // console.log(xpHome.showGoodsList);
                        }
                    },
                    error:function(){
                        console.log("没有更多商品")
                    }
                });
            }
        }
    });
    xpHome.goodsList();//获取商品
    //轮播
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide3"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'line',
        'dotPosition':'center'
    });
    var tab = new auiTab({
        element:document.getElementById("footer")
    },function(ret){
//	    	console.log(ret);
        if(ret){
//	            document.getElementById("demo").textContent = ret.index;
//	            if(ret.index == 2){
//	            	 window.location.href = "/vlth5/view/progress_check.html";
//	            }else if(ret.index == 3){
//	            	 window.location.href = "/vlth5/view/vlt_org.html";
//	            }
        }
    });

    //        var topDiv = new auiTab({
    //            element:document.getElementById("topDiv")
    //        },function(ret){
    //    	console.log(ret);
    //        });
</script>
</body>
</html>